<template>
    <div class="quanbu" >
    <div class="top">
        <div class="tupian">
            <img  :src="images" >
        </div>
        <div class="second">
            <span class="wenzi_1">{{shuju.name}}</span>
            <div>
                <el-button type="primary" icon="el-icon-caret-right" class="bofang">播放全部</el-button>
                <el-button type="primary" icon="el-icon-folder-add">收藏</el-button>
                <el-button type="primary" icon="el-icon-link">分享</el-button>
                <el-button type="primary" icon="el-icon-download">下载全部</el-button>
            </div>
            <div>
                <span>标签:</span>
                <div v-for="(item,index) in biaoqian" :key="index" class="hangnei">{{item}}</div>
            </div>
            <div>
                <span>歌曲:  {{shuju.trackCount}}</span>
                <span class="shuliang">播放:{{changeCount(shuju.playCount)}}</span>
            </div>
            <div class="jianjie">
                <div class="description" >简介 :{{shuju.description}}</div>
            </div>
        </div>
    </div>
        <div class="last" v-if="shuju.name">
            <ul>
                <li><span>歌曲列表</span></li>
                <li><span>评论</span></li>
                <li><span>收藏者</span></li>
            </ul>
            <div class="bianli" >
                <table  id="biaoge">
				<tr>
					<td>标题</td>
					<td>歌手</td>
					<td>专辑</td>
				</tr>
				<tr class="tr" v-for="(item,index) in gedan" :key="index">
					<td>{{item.name}}</td>
					<td >{{item.ar[0].name}}</td>
					<td>{{item.al.name}}</td>
				</tr>
			    </table>
            </div>
        </div>
    </div>
</template>
<script>
import {getDetails} from '../../request/api/lunbo'
export default {
    name:'xiangqing',
    data() {
        return {
            id:"",
            images:"",
            shuju:{},
            biaoqian:[],
            gedan:{},
            geshou:[],
        }
    },
    methods: {
        async getDetails(){
            let res = await getDetails(this.id);
            console.log('data',res)
            this.shuju = res.data.playlist;
            this.biaoqian = res.data.playlist.tags
            this.images = res.data.playlist.coverImgUrl
            this.gedan = res.data.playlist.tracks
            // this.gedan.forEach(item=>{
            //     item.ar.map(item=>{
            //         const opp = item.name
            //         this.geshou.push({opp})
            //         return opp
            //     })
            // })
            // console.log(this.geshou)
        },
        changeCount:function(num){
            if(num>10000){
                return (num/10000).toFixed(1)+"万"
            }
            return num;
        },
    },
    mounted() {
        this.id = this.$route.query
        this.getDetails()
        // console.log(this.id)
    },
}
</script>
<style lang="less" scoped>
.description{
    width: 100%;
    height: 100px;
    overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;




}
    table {
        width:100%;
        border-collapse: collapse;
    }
    td{
        padding: 15px;
        border: none;
    }
    .tr{
        border: 1px solid #f9f9f9;
    }
    
    
    .tr:nth-child(even){
        background-color: #f9f9f9;
    }
    .tr:hover{
        background-color: #f0f1f2;
        cursor: pointer;
    }
    .bianli{
        width: 100%;
        border: none;
        display: flex;
        flex-direction: row;
        margin-left: 20px;
    }
    .quanbu{
        width: 100%;
    }
    .top{
    display: flex;
    flex-direction: row;
    padding: 1.125rem;
    min-width: 1200px;
    height: 200px;
    .tupian{
        width: 200px;
        height: 200px;
        img{
            border-radius: 20px;
            width: 100%;
            height: 100%;
        }
    }
    .second{
        width: 1000px;
        height: 200px;
        margin-left: 20px;
        .wenzi_1{
            font-weight: bold;
            font-size: 20px;
        }
    }
    }
    .el-button--primary{
        margin-top: 15px;
        border-radius: 20px;
        background-color: #373737;
        border:1px solid #d8d8d8;
    }
    .bofang{
        background-color: #ff7a9e;
    }
    .hangnei{
        display: inline-block;
        margin: 10px;
    }
    .shuliang{
        margin-left: 5px;
    }
    .jianjie{
        margin-top: 10px;
    }
    .last{
        ul{
            display: flex;
            height: 3.0625rem;
            line-height: 3.0625rem;
            min-width: 200px;
            width: 200px;
            margin-left: 10px;
            z-index: 100;
            li{
                    list-style: none;
                    flex: 1;
                    text-align: center;
            }
        }
    }
</style>